<template>
  <div class="conetr">
    <div class="center-board">
      <div class="center-title">
        <h3>详情信息</h3>
      </div>
      <div class="action-bar mb-[20px]">
        <el-button icon="Back" type="primary" plain text @click="backTo">返回</el-button>
      </div>
    </div>
    <el-form ref="formRef" :model="useFor" label-width="120px" :disabled="true">
      <el-form-item label="类型">
        {{ VOUCHER_TYPE_ENUM_JSON[useFor?.couponStorageVo?.type] }}
        <!-- <el-input v-model="useFor.name" placeholder="请输入" style="width: 400px" /> -->
      </el-form-item>
      <el-form-item label="券码">
        {{ useFor.couponCode }}
        <!-- <el-input v-model="useFor.couponCode" placeholder="请输入" style="width: 400px" /> -->
      </el-form-item>
      <el-form-item label="房屋信息">
        <span>
          {{ useFor.consumerHouseVO?.neighborhood }}
        </span>
        <span style="margin-left: 10px">
          {{ useFor.consumerHouseVO?.houseNumber }}
        </span>
      </el-form-item>
      <el-form-item label="兑换人员">
        <!-- <el-input
          v-model="useFor.couponStorageVo.ownName"
          placeholder="请输入"
          style="width: 400px"
        /> -->
        {{ useFor.consumerHouseVO?.ownName }}
      </el-form-item>
      <el-form-item label="联系电话">
        {{ useFor.consumerHouseVO?.mobile }}
      </el-form-item>
      <el-form-item label="兑换时间">
        {{ useFor.claimTime }}
      </el-form-item>
      <el-form-item label="券额">
        {{ useFor.couponStorageVo?.amount }}
      </el-form-item>
      <el-form-item label="兑换积分">
        {{ useFor.couponStorageVo?.coins }}
      </el-form-item>
      <el-form-item label="有效时间">
        {{ effectiveDispose(useFor.couponStorageVo) }}
      </el-form-item>
      <el-form-item label="状态" required>
        {{ COUPON_STATUS_LIST[useFor.status] }}
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import {
  VOUCHER_TYPE_ENUM,
  COUPON_STATUS_LIST,
  VOUCHER_STATE_ENUM,
  VOUCHER_TYPE_ENUM_JSON,
} from "@/enums/coupon/coupon";
// 1. 正确定义 props
const props = defineProps({
  // 1 是装修知识的type固定字段 2是装修案例
  type: {
    type: String,
    required: true,
    default: "add",
  },
  couponData: {
    type: Object,
    default: null,
  },
});

const useFor = props.couponData;
// 4. 定义 emit 以便向父组件通知状态变化
const emit = defineEmits(["backTo"]);
watch((newVal) => {
  useFor.value = props.couponData;
  console.log(useFor.value);
});

function effectiveDispose(data) {
  if (!data || !data.effectiveValue) {
    return "-";
  } else if (data.effectiveType == 1) {
    if (data.effectiveValue.day == -1) {
      return "长期有效";
    } else {
      return data.effectiveValue.day + "天";
    }
  } else {
    return data.effectiveValue.begin + "~" + data.effectiveValue.end;
  }
}
function backTo() {
  emit("backTo");
}
</script>
<style scoped lang="scss">
.conetr {
  padding: 10px;
  background-color: #fff;
  position: relative;
  flex: 1;
  margin-left: 10px;
  box-sizing: border-box;
  background-color: #fff;
  padding: 10px 20px;

  .center-board {
    .center-title {
      position: absolute;
      left: 20px;
    }
    .action-bar {
      position: relative;
      box-sizing: border-box;
      padding: 10px 0 15px 0;
      border-bottom: 1px solid var(--el-border-color-extra-light);
      display: flex;
      align-items: center;
      justify-content: flex-end;

      u .delete-btn {
        color: #f56c6c;
      }
    }
  }
}
</style>
